<template lang='pug'>
  Modal(v-model="modalShow" title="新建完成任务" width="800")
    Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="86")
      Row(type="flex" justify="start" :gutter="16")
        Col(span="24")
          .display-flex
            FormItem(label="完成时间:" prop="beginDate")
              DatePicker.input-has-border(:value="formValidate.beginDate" type="date" format="yyyy-MM-dd" @on-change="beginDateChange" style="width:200")
            FormItem(prop="beginTime" :label-width="15")
              TimePicker.input-has-border(:value="formValidate.beginTime" format="HH:mm" @on-change="beginTimeChange" placeholder="时间" style="width: 112px")
        Col(span="24")
          FormItem(label="完成情况说明:" prop="content" :label-width="120")
            Input.input-has-border(v-model="formValidate.content" type="textarea" placeholder="请输入" :rows="4")
    template(slot="footer")
      Button(@click="modalShow = false") 关闭
      Button(type="info" @click="handleSubmit('formValidate')") 保存
</template>

<script>
import WorkScheduleApi from '@/api/WorkSchedule.api.js'
export default {
  name:'',
  props:{},
  data () {
    return {
      modalShow: false,
      formValidate: {
        beginDate: this.$moment(new Date()).format('YYYY-MM-DD'), // 开始日期
        beginTime: '', // 开始时间
        type: 1, // 类型：1工作计划,2完成任务,3系统完成任务
        content: '' // 计划详情
      },
      ruleValidate: {
        beginTime: [
          { required: true, message: '时间不能为空' }
        ],
        beginDate: [
          { required: true, message: '日期不能为空' }
        ],
        content: [
          { required: true, message: '完成情况不能为空', trigger: 'change' }
        ]
      }
    }
  },

  components: {},

  computed: {
  },
  watch: {
    modalShow (val) {
      console.log(val)
      if (val) {
        let start = this.$moment(this.$moment(new Date()).format('YYYY-MM-DD HH:mm'))
        // let remainder = 30 - (start.minute() % 30)
        this.formValidate.beginTime = this.$moment(start).format("HH:mm")
      }
    }
  },

  beforeMount() {},

  mounted() {},

  methods: {
    show () {
      this.$refs['formValidate'].resetFields()
      this.modalShow = true
    },
    beginDateChange (val) {
      this.formValidate.beginDate = val
    },
    beginTimeChange (val) {
      this.formValidate.beginTime = val
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.saveTask(name)
        } else {
          this.$Message.warning('有必填项未填!')
        }
      })
    },
    saveTask (name) {
      WorkScheduleApi.SaveTask({
        beginTime: this.formValidate.beginDate + ' ' + this.formValidate.beginTime,
        endTime: this.formValidate.beginDate + ' ' + this.formValidate.beginTime,
        content: this.formValidate.content
      }).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.modalShow = false
          this.$emit('get-list')
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    // 
  }

}

</script>
<style lang='less' scoped>
</style>